const { isDev } = require('./constant');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const getCssLoaders = (importLoaders) => [
    isDev
        ? 'style-loader'
        : {
              loader: MiniCssExtractPlugin.loader,
          },
    isDev
        ? {
              loader: 'css-loader',
              options: {
                  esModule: true,
                  modules: {
                      mode: 'local',
                      namedExport: true,
                      localIdentName: '[name]_[local]-[hash:8]',
                  },
                  sourceMap: isDev,
                  importLoaders,
              },
          }
        : {
              loader: 'css-loader',
              options: {
                  esModule: true,
                  modules: {
                      namedExport: true,
                      localIdentName: '[name]-[local]-[hash:8]',
                  },
                  sourceMap: isDev,
                  importLoaders,
              },
          },
    {
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    [
                        'postcss-preset-env',
                        {
                            autoprefixer: {
                                grid: true,
                            },
                        },
                    ],
                    // ['postcss-import', {}],
                    // ['postcss-short', { prefix: 'x' }],
                    // // 修复一些和 flex 布局相关的 bug
                    // require('postcss-flexbugs-fixes'),
                    // require('postcss-preset-env')({
                    //     autoprefixer: {
                    //         grid: true,
                    //         flexbox: 'no-2009',
                    //     },
                    //     stage: 3,
                    // }),
                    // require('postcss-normalize'),
                ],
            },
            sourceMap: isDev,
        },
    },
];
module.exports = getCssLoaders;
